<template>
    <div class="dashboard-container">
      <el-row :gutter="20">
        <el-col :span="6" v-for="data in enhancedTopbar" :key="data.id">
          <div class="grid-content" 
               :style="{
                 '--start-color': data.colorStart,
                 '--end-color': data.colorEnd
               }">
            <h1 style="font-size: 25px;">{{ data.data }}</h1>
            <p>{{data.title}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue';
import {getTodayData} from '@/apis/admin/order'

// 定义颜色主题数组（可根据需要扩展更多颜色组合）
const colorThemes = [
  ["rgba(115, 187, 249, 1)", "rgba(123, 208, 250, 1)"], // 蓝色渐变
  ["rgba(120, 220, 156, 1)", "rgba(133, 241, 161, 1)"], // 绿渐变
  ["rgba(233, 30, 99, 0.7)", "rgba(156, 39, 176, 0.7)"], // 粉紫渐变
  ["rgba(239,133,104,1.0)", "rgba(246,202,137,1.0)"], // 橙红渐变
  ["rgba(158, 158, 158, 0.7)", "rgba(96, 96, 96, 0.7)"], // 灰色渐变
];

// 原始数据
const topbar = ref([

]);

// 计算属性：合并颜色主题到数据中
const enhancedTopbar = computed(() => {
  return topbar.value.map((item, index) => {
    return {
      ...item,
      colorStart: colorThemes[index % colorThemes.length][0],
      colorEnd: colorThemes[index % colorThemes.length][1]
    };
  });
});
const findToday = async () => {
  try {
    const res = await getTodayData()
    if (res.code === '0') {
      topbar.value = res.data
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    ElMessage.error('获取统计数据失败')
    console.error(error)
  }
}

onMounted(() => {
findToday()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}
.grid-content {
  background-image: linear-gradient(88deg, var(--start-color) 0%, var(--end-color) 98.4251968503937%);
  background-repeat: repeat;
  background-size: normal;
  color: white;
  padding: 20px;
  border-radius: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.096);
}
/* .grid-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
} */
</style>
